<template>
  <SelectBox :map="map" @fartherFn="changeLang" id="lang"/>
  <div class="popup_main" v-if="show" @click="closePopup($event)">
    <div class="popup_box">
      <router-link to="/MoneyPackage" class="popup_list">{{$t("nav.wallet")}}</router-link>
      <div class="popup_list" @click="coming">{{$t("nav.lp")}}</div>
      <div class="popup_list" @click="coming">{{$t("nav.apply")}}</div>
<!--      <router-link to="/ApplyUnion" class="popup_list" >{{$t("nav.apply")}}</router-link>-->
      <div class="popup_list" @click="active">{{$t("nav.active")}}</div>
      <div class="lang" @click="openLang">
        <img src="@/assets/select/international.png" alt="" />
        <div>{{map[state.lang]}}</div>
        <img class="down" src="@/assets/select/select_down.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import SelectBox from '@components/Select/index.vue';
  import {computed, getCurrentInstance} from 'vue'
    import {useStore} from 'vuex'
    import http from "../../http";
    import {useI18n} from "vue-i18n";
    const { t } = useI18n();
  const { proxy } = getCurrentInstance();

  const {state,commit} = useStore()
    let show = computed(() => state.popupType)

    import {useRouter} from "vue-router";
    let router = useRouter();

    const closePopup = (e) => {
        let className = e.target.className;
        if(className === 'popup_main' || className.indexOf("popup_list") !== -1) {
            commit('changePopupType',false)
        }
    };
    let map = {
      "en-US": "English",
      "zh-HK": "中文-繁體",
      "ja-JP": "日本語",
      "ko-KR": "한국어",
    };
    state.lang = localStorage.getItem("lang");

    const changeLang = function({k, v}){
      if(k === "ja-JP" || k === "ko-KR"){
        Toast(t("coming"))
        return;
      }
      localStorage.setItem("lang", k);
      proxy.$i18n.locale = k;
      state.lang = k;
    };

    const coming = function(){
      Toast(t("coming"))
    };

    const openLang = function(){
      commit('changeSelectType', "lang");
    };

    const active = async function(){
      let res = await http.get(`/api/user/isActive`);
      if(res.code === 200){
        if(res.data){
          Toast(t("active.hadActive"));
          router.push("/InvitationCode");
        }else{
          commit('changeOverlayName',{name: 'ActivationAddress', params: {}})
        }
      }
    };

</script>

<style scoped lang="scss">
  .popup_main {
    height: calc(100vh - 45px);
    width: 100%;
    max-width: 375px;
    background: rgba(255,255,255,.4);
    position: fixed;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    opacity: 1;
  }
  .popup_box {
    width: 256px;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 0;
    background: #000;
  }
  .popup_list {
    display: flex;
    height: 49px;
    border-bottom: 1px solid rgba(216, 188, 132, .6);
    font-size: 14px;
    @include fontSCRegular;
    font-weight: 400;
    color: $color;
    line-height: 49px;
    padding-left: 24px;
    text-align: left;
    cursor: pointer;
  }
  .lang{
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 20px;
      &.down{
        width:10px;
        transform: rotate(180deg);
      }
    }
    div{
      margin: 0 10px;
      font-size: 12px;
      color: #dea05c;
    }
  }
</style>
